<template>
    <el-dialog width="40%" title="添加客户回访记录" :model-value="show" @close="emit('hide')">
        <el-form :model="form" ref="formRef" label-width="100px" class="demo-ruleForm" :rules="rules">
            <el-form-item label="回访客户" prop="customerName">
                <el-select v-model="form" placeholder="请选择">
                    <el-option :label="form.customerName" :value="form.customerName" />

                </el-select>
            </el-form-item>
            <el-form-item label="回访方式" prop="visitMethod">
                <el-select v-model="form.visitMethod" placeholder="请选择">
                    <el-option label="男" value="男" />
                    <el-option label="女" value="女" />
                </el-select>
            </el-form-item>
            <el-form-item label="回访日期" prop="entryTime">

                <el-date-picker v-model="value1" type="date" :default-value="new Date(2010, 9, 1)" />

            </el-form-item>
            <el-form-item label="回访原因" prop="visitCause">
                <el-input type="textarea" :rows="3" placeholder="请输入回访原因" />
            </el-form-item>
            <el-form-item label="回访结果" prop="visitResult">
                <el-input type="textarea" :rows="3" placeholder="请输入回访结果" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="addFn">
                    确定
                </el-button>
                <el-button @click="setFn">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>import { FormInstance } from 'element-plus';
import { reactive, ref, watch } from 'vue';

const formRef = ref<FormInstance>();
const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    id: {
        type: Number,
        default: 0,
    },
    customerName: {
        type: String,
        default: "",
    },
    visitMethod: {
        type: Number,
        default: 0,
    },


})
const value1 = ref('');
const size = ref<'default' | 'large' | 'small'>('default')
const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]


const emit = defineEmits(["hide"]);
const form = reactive<IRow>({
    id: 0,
    customerName: "",
    visitMethod: 0,
    entryTime: "",
    visitCause: "",
    visitResult: ""
});

const rules = reactive({
    customerName: [{ required: true, trigger: "blur", message: "请选择客户" }],
    visitMethod: [{ required: true, trigger: "blur", message: "请选择回访方式" }],
    entryTime: [{ required: true, trigger: "blur", message: "请选择回访日期" }],
    visitCause: [{ required: true, trigger: "blur", message: "请输入回访原因" }],
})

watch(
    () => props.id,
    () => {
        if (props.id !== 0) {
            form.id = props.id;
            form.customerName = props.customerName;
            form.visitMethod = props.visitMethod;

            //   可以一次性传递一个对象，然后进行浅拷贝
            //   Object.assign(form,props.data)
        } else {
            form.id = 0;
            form.visitMethod = 0;
            form.customerName = "";

        }
    }
);
const addFn = () => {
}

const setFn = () => {
    emit("hide")
}
</script>

<style lang="less" scoped>
.el-button--text {
    margin-right: 15px;
}

:deep(.el-dialog__title) {
    float: left;
}

.el-input {
    width: 100%;
    // width: 350px;
}

:deep(.el-form-item__label) {
    font-weight: 600;
}

.el-button {
    width: 80px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>